<template>
    <div>
        <el-dialog
            :visible.sync="is_show"
            width="980px"
            @closed="closed"
            center
        >
            <template slot="title">
                <span class="f16">
                    <span class="finish">{{agent_name}}</span>的数据汇总
                </span>
            </template>
            <div class="flex center">
                <span class="title mr20">时间选择</span>
                <el-date-picker
                    @change="getData"
                    v-model="time"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </div>
            <div class="chart-wrap">
                <div id="myChart" ref="myChart"></div>
                <div class="title">
                    <div>已完成订单</div>
                    <div>接单未完成</div>
                    <div>返修订单</div>
                    <div>平均耗时</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    data() {
        return {
            is_show: false,
            agent_id: 0,
            agent_name: '',
            singleOption: {
                grid: [
                    {x: '10%', y: '10%', width: '50%', height: '70%'},
                    {x2: '4%', y: '10%', width: '25%', height: '70%'}
                ],
                xAxis:[
                    {
                        gridIndex: 0,
                        position: 'top',
                        min: 0,
                        axisLabel: {
                            show: true,
                            formatter: '{value} 单',
                            alignWithLabel: true,
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        }
                    },
                    {
                        gridIndex: 0,
                        position: 'bottom',
                        min: 0,
                        axisLabel: {
                            show: true,
                            formatter: '{value} 天',
                            alignWithLabel: true,
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        minorTick: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        }
                    },
                    {
                        gridIndex: 1,
                        min: 0,
                        axisLabel: {
                            show: true,
                            formatter: '{value} %',
                            alignWithLabel: true,
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        }
                    },
                    {
                        gridIndex: 1,
                        position: 'top',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        gridIndex: 0,
                        type: 'category',
                        data: [],
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    {
                        gridIndex: 1,
                        data: ['返修率', '驳回率'],
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barGap: '500%',
                        barWidth: 10,
                        data: [],
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        itemStyle: {
                            color: '#0077FF',
                            // color: function(params) {
                            //     let colorList = ['#757D88', '#7EBAFF', '#0077FF']
                            //     let index = params.dataIndex
                            //     return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            //         {offset: 0, color: '#fff'},
                            //         {offset: 1, color: colorList[index]}
                            //     ])
                            // },
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c} 单'
                        }
                    },
                    {
                        type: 'bar',
                        barGap: '500%',
                        barWidth: 10,
                        data: [],
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        itemStyle: {
                            color: '#FFAB2E',
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c} 单'
                        }
                    },
                    {
                        type: 'bar',
                        barGap: '500%',
                        barWidth: 10,
                        data: [],
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        itemStyle: {
                            color: '#757D88',
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c} 单'
                        }
                    },
                    {
                        type: 'bar',
                        barGap: '500%',
                        barWidth: 10,
                        data: [],
                        xAxisIndex: 1,
                        yAxisIndex: 0,
                        itemStyle: {
                            color: '#FF2E7C',
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c} 天'
                        }
                    },
                    {
                        type: 'bar',
                        xAxisIndex: 2,
                        yAxisIndex: 1,
                        barWidth: 10,
                        data: [],
                        itemStyle: {
                            color: function(params) {
                                let colorList = ['#FF2E7C', '#757D88']
                                let index = params.dataIndex
                                return colorList[index]
                            },
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c} %'
                        }
                    }
                ],
            },
            options: {
                xAxis: {
                    data: [],
                    type: 'category',
                    axisTick: {alignWithLabel: true}
                },
                yAxis: [
                    {
                        name: '件数',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} 件'
                        },
                    },
                    {
                        name: '耗时',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} 天'
                        },
                        splitLine: {
                            show: false
                        },
                        minorTick: {
                            show: false
                        }
                    },
                    {
                        name: '百分比',
                        position: 'right',
                        offset: 50,
                        max: 100,
                        min: 0,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        splitLine: {
                            show: false
                        },
                        minorTick: {
                            show: false
                        }
                    },
                ],
                color: ['#67C23A','#FFA500','#FF8C00','#FC0F00', '#FF0000', '#1E90FF'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: '13%',
                        data: [],
                        yAxisIndex: 0,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#0077FF'}
                            ])
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: (a) => {
                                return a.data + '件'
                            }
                        }
                    },
                    {
                        type: 'bar',
                        barWidth: '13%',
                        data: [],
                        yAxisIndex: 0,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#7EBAFF'}
                            ]),
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: (a) => {
                                return a.data + '件'
                            }
                        }
                    },
                    {
                        type: 'bar',
                        barWidth: '13%',
                        data: [],
                        yAxisIndex: 0,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#757D88'}
                            ]),
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: (a) => {
                                return a.data + '件'
                            }
                        }
                    },
                    {
                        type: 'bar',
                        barWidth: '13%',
                        data: [],
                        yAxisIndex: 2,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#97B2D8'}
                            ]),
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: (a) => {
                                return a.data + '%'
                            }
                        }
                    },
                    {
                        type: 'bar',
                        barWidth: '13%',
                        data: [],
                        yAxisIndex: 2,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#757D88'}
                            ]),
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: (a) => {
                                return a.data + '%'
                            }
                        }
                    },
                    {
                        type: 'bar',
                        data: [],
                        yAxisIndex: 1,
                        barWidth: '13%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#97B2D8'}
                            ]),
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: (a) => {
                                return a.data + '天'
                            }
                        }
                    },
                ],
            },
            time: [],
            pickerOptions: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                    picker.$emit('pick', [new Date(), new Date()]);
                    }
                }, {
                    text: '今年至今',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date(new Date().getFullYear(), 0);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setMonth(start.getMonth() - 6);
                    picker.$emit('pick', [start, end]);
                    }
                }],
                disabledDate(time) {
                    return (
                        time.getTime() - 24 * 60 * 60 * 1000 >
                        Date.now() - 8.64e7
                    )
				},
            },
        }
    },

    mounted() {

    },

    methods: {
        closed() {
            Object.assign(this.$data, this.$options.data())
        },
        showOn(data) {
            this.agent_id = data.id
            this.agent_name = data.name
            this.getData()
        },
        getData() {
            let params = {
                agent_id: this.agent_id,
                agent_name: this.agent_name
            }
            if (this.time) {
                params.time = this.time
            }
            this.$axios.get(`/api/user/agent_statistics`, {
                params: params
            }).then(res => {
                if (res.data.code == 200) {
                    this.is_show = true
                    this.$nextTick(() => {
                        this.echartsInit(res.data.data)
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            }).catch(e => {})
        },
        echartsInit (data) {
            let sum = data[0]
            this.singleOption.series[0].data = [sum.finishCount]
            this.singleOption.series[1].data = [sum.noFinish]
            this.singleOption.series[2].data = [sum.reworkCount]
            this.singleOption.series[3].data = [sum.day]
            this.singleOption.series[4].data = [sum.repairRate, sum.rejectionRate]
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            myChart.setOption(this.singleOption)
        },
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-dialog__body {
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        height: 450px;
        .chart-wrap {
            position: relative;
            height: 400px;
            .title {
                padding-top: 83px;
                position: absolute;
                color: #333;
                font-weight: bold;
                font-size: 12px;
                left: 24px;
                div {
                    margin-bottom: 40px;
                    line-height: 19px;
                    text-align: right;
                }
            }
            #myChart{
                width: 100%;
                height: 400px;
                margin-left: auto;
                margin-right: auto;
                float: left;
            }
        }

    }
}
</style>
